<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>新冠肺炎小区分布查询</title>
    <!-- <link rel="stylesheet" href="./src/assets/js/leaflet/dist/leaflet.css" /> -->
    <!-- <link rel="stylesheet" href="./src/assets/js/bootstrap-3.3.5/css/bootstrap.min.css" /> -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/leaflet/1.5.1/leaflet.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.5/css/bootstrap.min.css" />
    <link rel="stylesheet" href="./src/assets/js/bootstrap-select/css/bootstrap-select.min.css"/>
    <link rel="stylesheet" href="./src/assets/css/index.css">

    <div id="wx_pic" style="margin:0 auto;display:none;">
        <img src="./src/assets/img/wx_logo.jpg" alt="">
    </div>
</head>

<body>
    <div id="app">
        <!-- 地图 -->
        <div id="map">
        </div>
        <!-- 检索信息框 -->
        <div class="search-content">
            <div class="search-content-min-content">
                <span>检索</span>
            </div>
            <div class="search-content-max-content">
                <div style="margin-bottom: 1rem;display: inline-block;width: 100%;">
                    <div style="width: 40%;float: left;">
                        <select id="provice" data-live-search ="true">
                        </select>
                    </div>
                    <div  style="width: 40%;float: left;margin-left: 8%;"> 
                        <select id="city" data-live-search ="true">
                        </select>
                    </div>
                </div>
                <div class="input-group">
                    <span class="input-group-addon" id="basic-addon1">
                        <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                    </span>
                    <input type="text" class="form-control search-input" placeholder="请输入小区名称"
                        aria-describedby="basic-addon1">
                </div>
                
                <!-- 收起检索内容框的按钮 -->
                <div class="search-content-min-btn" style="display: none;">
                    <span class="search-content-min-btn-text">收起</span>
                </div>
            </div>
        </div>
        <!-- 检索结果列表 -->
        <div class="search-result">
            <ul class="search-result-list">
                <li class="search-result-item">

                </li>
            </ul>
        </div>

        <!-- 确诊病例列表信息 -->
        <div class="data-list-content">
            <table class="data-list-table" cellSpacing="0" cellPadding="0">
                <thead>
                    <tr>
                        <th style="width: 54%;">曾确诊地点</th>
                        <th style="width: 23%;">曾确诊人数</th>
                        <th style="width: 23%;">与我距离</th>
                    </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
        </div>
        <!-- 点击显示列表 -->
        <div class="show-data-list-btn">
            查看列表
        </div>
        <!-- 点击显示关于信息 -->
        <!-- <div class="show-info-btn">
            <span class="glyphicon glyphicon-info-sign" title="数据来源"></span>
        </div> -->
        <button type="button" class="btn btn-primary show-info-btn" data-toggle="modal" data-target=".data-source">
            <span class="glyphicon glyphicon-info-sign" title="数据来源"></span>
        </button>
    </div>

    <!-- 数据来源信息模态框 -->
    <div class="modal fade data-source" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
        <div class="modal-dialog modal-sm" role="document">
          <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">
                    数据说明
                </h4>
              </div>
              <div class="modal-body">
                <span class="data-source-text">1、数据均来自各城市卫健委、各地政府官网等官方渠道。</span><br/>
                <span class="data-source-text">2、系统中的各市曾确诊人数和卫健委公布数字不一致属正常现象，因为部分确诊病例的详细信息并未公开。</span><br/>
                <span class="data-source-text">3、“-”为该地点暂未公布具体的人数信息。</span><br/>
                <span class="data-source-text">4、“曾确诊地”为曾确诊病例确诊前的居住地，确诊病例均已转至定点医院，请做好防护，无需过分担心。</span><br/>
                <!-- <span class="data-source-text">4、本系统只能查询、展示经由各地卫健委、地方政府发布的新冠肺炎患者分布信息。</span><br/> -->
                <span class="data-source-text">5、数据每日实时更新，可以将系统保存至微信收藏夹，持续关注疫情发展。</span><br/>
                <span class="data-source-text">6、技术支持: 309525902@qq.com</span><br/>
              </div>
          </div>
        </div>
      </div>
</body>
<!-- <script src="./src/assets/js/leaflet/dist/leaflet.js"></script> -->
<script src="https://cdn.bootcss.com/leaflet/1.5.1/leaflet.js"></script>
<!-- <script data-main="./src/index.js" src="./src/assets/js/require/require.js"></script> -->
<script data-main="./src/index.js" src="https://cdn.bootcss.com/require.js/2.1.11/require.min.js"></script>
<script>
    require.config({
        baseUrl: './src',
        paths: {
            "jquery":["https://cdn.bootcss.com/jquery/1.11.0/jquery.min", "assets/js/jquery/jquery-1.11.0.min"],
            "bootstrapSelect":"assets/js/bootstrap-select/js/bootstrap-select.min",
            "bootstrap": ["https://cdn.bootcss.com/twitter-bootstrap/3.3.5/js/bootstrap.min","assets/js/bootstrap-3.3.5/js/bootstrap.min"],
            "paginator": ["/assets/jsbootstrap-3.3.5/js/bootstrap-paginator.min"],
            "app": "/views"
        },
        shim: {
            "bootstrap": ['jquery'],
            "bootstrapSelect":['jquery','bootstrap'],
            "paginator": ['jquery'],
        }
    })
</script>
<script src="./src/assets/js/leaflet/plugins/leaflet.ChineseTmsProviders.js"></script>
</html>